<template>
	<div>
		<el-form ref="form" :model="form" label-width="80px">
		<el-form-item label="标题">
		    <el-input v-model="form.title" clearable></el-input>
		</el-form-item>
		<el-form-item label="类型设置">
			<el-col :span="12">
				<el-form-item label="分类" v-if="cates.length">
					<el-select v-model="form.cate_id" placeholder="请选择" clearable>
					    <el-option v-for="(item,index) in cates" :key="index" :label="item.cate_name" :value="item.id">
					    </el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="标签集" v-if="tags.length">
				    <el-select v-model="form.tags" multiple collapse-tags placeholder="请选择">
						<el-option v-for="(item,index) in tags" :key="index" :label="item.tag_name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
		</el-form-item>
		<el-form-item label="描述">
		    <el-input v-model="form.briefly" type="textarea" :rows="2"></el-input>
		</el-form-item>
		<el-form-item label="状态设置">
			<el-col :span="8">
				<el-form-item label="是否显示">
					<el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="允许评论">
					<el-switch v-model="form.allow_comment" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="是否置顶">
					<el-switch v-model="form.top" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
				</el-form-item>
			</el-col>
		</el-form-item>
		<el-form-item label="转载地址">
		    <el-input v-model="form.reprint" clearable></el-input>
		</el-form-item>
		<el-form-item label="上传图片">
			<div style="width:100%;">
				<ImgUpload :type="url"></ImgUpload>
			</div>
		</el-form-item>
		<el-form-item label="主体格式">
			<el-radio-group v-model="form.type">
			  <el-radio-button label="1">markdown</el-radio-button>
			  <el-radio-button label="0">富文本</el-radio-button>
			</el-radio-group>
		</el-form-item>
		<el-form-item label="主体">
		     <markdown-editor v-if="form.type == '1'" v-model="form.content" :configs="markdownOption" :highlight="true"></markdown-editor>
		     <quill-editor v-if="form.type != '1'" v-model="form.content" :config="editorOption">
		     </quill-editor>
		</el-form-item>
		<el-form-item class="submit-btn">
		    <el-button type="primary" @click="onSubmit">立即{{type}}</el-button>
		    <el-button @click="cancel">取消</el-button>
		</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import {FormFunc} from 'common/formMixin'
	import {markdownEditor} from 'vue-simplemde'
    import {quillEditor} from 'vue-quill-editor'
    import 'quill/dist/quill.bubble.css'
	import ImgUpload from 'plugs/upload/upload'

	export default {
		mixins: [FormFunc],
		props: {
			form: {
				type: Object,
				default: () => {
					return {
						title: '',
						cate_id: '',
						tags: [],
						briefly: '',
						content: '',
						reprint: '',
						allow_comment: true,
						type: '1',
						status: true,
						top: false
					}
				}
			}
		},
		data() {
			return {
				url: 'item',
				cates: [],
                tags: [],
				markdownOption: {
                    status: true,
                    renderingConfig: {
                        codeSyntaxHighlighting: true,
                        highlightingTheme: 'atom-one-light'
                    }
                },
                editorOption: {
                    // something config
                }
			}
		},
		created() {
			this._loadCates();
			this._loadTags();
		},
		methods: {
			_loadCates() {
				this.$http.get('cate/all').then((response) => {
					this.cates = response.data;
				})
			},
			_loadTags() {
				this.$http.get('tag/all').then((response) => {
					this.tags = response.data;
				})
			}
		},
		components: {
			markdownEditor,quillEditor,ImgUpload
		}
	}
</script>

<style lang="css" scope>
.submit-btn {
	margin: 0;
	text-align: center;
}
.CodeMirror-line {
	line-height: 20px !important;
	margin: 2px 0;
}
.ql-toolbar.ql-snow{
	line-height: normal !important;
}
.ql-editor {
	min-height: 330px;
}
.el-select {
	min-width: 180px;
}
.el-select .el-input{
	width: 100% !important;
}
@import '../../static/css/simplemk.css'
</style>